<!--
  流程中间部分
-->
<template>
  <div v-show="tabsVisible" id="moveDiv" class="flow-avic-top" :style="style">
    <div class="left anchor">
      <a-popover
        placement="bottomLeft"
        overlay-class-name="left-popover"
        :open="showTable"
        :get-popup-container="(triggerNode) => triggerNode.parentNode"
        @openChange="changeTable"
      >
        <a>
          <!-- <a-icon type="setting" /> -->
          <avic-icon svg="avic-settings-line" />
        </a>
        <template #content>
          <div class="flow-chart-table">
            <div class="top-box">
              模块显示管理
              <span>拖动名称可排序</span>
            </div>
            <table class="tab-box">
              <thead>
                <tr>
                  <th>显示</th>
                  <th>名称</th>
                  <th>顺序</th>
                </tr>
              </thead>
              <tbody>
                <draggable v-model="data" v-bind="dragOptions" handle=".li-drag" style="display: contents" @end="dragEnd">
                  <template #item="{ element: tim }">
                    <tr class="flow-table-row">
                      <td>
                        <a-checkbox
                          :id="tim.id"
                          :checked="tim.display === '1'"
                          :disabled="tim.code === 'bpm_form_tab'"
                          @click="updateTableShow"
                        />
                      </td>
                      <td class="li-drag">{{ tim.name }}</td>
                      <td>{{ tim.order }}</td>
                    </tr>
                  </template>
                </draggable>
              </tbody>
            </table>
          </div>
        </template>
      </a-popover>
    </div>
    <div class="divider-left" />
    <div class="main">
      <ul class="table anchor">
        <li
          v-for="(item, $index) in data"
          v-show="item?.display == '1'"
          :key="$index"
          :class="{ activeTab: selectTab === $index }"
          @click="selectTable(item, $index)"
        >
          <a>{{ item.name }}</a>
        </li>
      </ul>
    </div>
    <div class="divider-right" />
    <div class="right">角色：{{ bpmInstanceObject.bpmModel.userIdentity }}</div>
  </div>
</template>
<script>
import { Popover, Checkbox } from 'ant-design-vue';
// import Vue from 'vue';
// import VueDND from 'awe-dnd';
// Vue.use(VueDND);
import bpmUtils from '../../../bpmutils/FlowUtils';
// import draggable from 'vuedraggable';
import request from '@/utils/request';
export default {
  name: 'BpmTabs',
  components: {
    APopover: Popover,
    ACheckbox: Checkbox,
    draggable: defineAsyncComponent(() => import('vuedraggable'))
  },
  props: {
    // prop接收传过来的参数
    tabsTop: {
      type: String,
      required: true
    },
    bpmInstanceObject: {
      type: Object,
      default: null
    },
    showBpmTabs: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      clientWidth: null,
      clientHeight: null,
      elementX: null,
      elementY: null,
      showDragFlag: false,
      style: null,
      data: [],
      tabsVisible: true,
      selectTab: '0',
      showTable: false,
      flowRole: '',
      // 树搜索组件需要的加载数据格式
      updateBpmTabsExtsParam: {
        url: `${bpmUtils.baseurl}/business/updateBpmTabsExts/v1`,
        method: 'post'
      },
      dragOptions: {
        // 拖拽配置参数
        itemKey: 'id',
        animation: 500,
        group: 'tabs',
        disabled: false,
        ghostClass: 'ghost',
        forceFallback: true,
        fallbackClass: 'sortable-fallback'
      }
    };
  },
  // 接收组件传参
  watch: {
    'bpmInstanceObject.bpmModel.userIdentity': {
      immediate: true,
      handler(userIdentity) {
        if (userIdentity !== '') {
          this.flowRole = `${this.bpmInstanceObject.bpmModel.activitylabel}  当前身份：${userIdentity}`;
        } else {
          this.flowRole = `${this.bpmInstanceObject.bpmModel.activitylabel}`;
        }
      }
    },
    'bpmInstanceObject.bpmModel.activitylabel': {
      immediate: true,
      handler(activitylabel) {
        if (this.bpmInstanceObject.bpmModel.userIdentity !== '') {
          this.flowRole = `${activitylabel}  当前身份：${this.bpmInstanceObject.bpmModel.userIdentity}`;
        } else {
          this.flowRole = `${activitylabel}`;
        }
      }
    },
    'bpmInstanceObject.bpmTabs.showTabs': {
      handler(tabs) {
        this.data = tabs;
      }
    }
  },
  created() {
    if (this.showBpmTabs) {
      this.bpmInstanceObject.bpmTabs.getBpmTabs(this.bpmInstanceObject);
    }
  },
  mounted() {
    if (this.bpmInstanceObject.bpmModel && this.bpmInstanceObject.bpmModel.userIdentity && this.bpmInstanceObject.bpmModel.activitylabel) {
      this.flowRole = `${this.bpmInstanceObject.bpmModel.activitylabel}
      当前身份：${this.bpmInstanceObject.bpmModel.userIdentity}`;
    }
    // this.$dragging.$on('dragged', ({ value }) => {
    //   value.list.map((tim, index) => {
    //     tim.order = index + 1;
    //   });
    // });
    this.selectTab = 0; // 初始选中第一个tab
  },
  methods: {
    selectTable(e, index) {
      this.selectTab = index;
      // eslint-disable-next-line func-names
      setTimeout(() => {
        this.$emit('scrollViewByTab', e);
      });
    },
    // 滚动屏幕
    handleTabsScroll(e) {
      if (e.id) {
        const across = document.querySelectorAll(`div#${e.id}`);
        const scrollTopValue = across[0].offsetTop;
        window.scrollTo(0, scrollTopValue - 90);
      }
    },
    getTabsVisible(tabsVisible) {
      this.tabsVisible = tabsVisible;
    },
    // 修改个性设备
    updateBpmTabsExts() {
      this.data.forEach((itme, index) => {
        itme.order = index + 1;
      });
      const parameter = { listStr: JSON.stringify(this.data) };
      // this.$sdk
      //   .http(this.updateBpmTabsExtsParam.url, parameter, this.updateBpmTabsExtsParam.method) // 提交
      request({
        url: this.updateBpmTabsExtsParam.url,
        data: parameter,
        method: this.updateBpmTabsExtsParam.method
      })
        .then((res) => {
          if (res.success) {
            this.$message.success('修改设置成功');
            this.bpmInstanceObject.bpmTabs.setBpmOriginalTabs(this.bpmInstanceObject, this.data);
          } else {
            this.$message.error('修改设置失败!');
          }
        })
        .catch(() => {
          this.$message.error('修改设置失败!');
        });
    },
    updateBpmMessage() {
      this.$confirm({
        title: '修改设置',
        okText: '确定',
        cancelText: '取消',
        content: '您确定要保存当前的设置吗？',
        onOk: () => {
          this.updateBpmTabsExts();
        },
        onCancel: () => {
          this.bpmInstanceObject.bpmTabs.getBpmTabs(this.bpmInstanceObject);
        }
      });
    },
    changeTable() {
      if (this.showTable === true) {
        let isUpdate = false;
        if (this.bpmInstanceObject.bpmTabs.originalTabs && this.bpmInstanceObject.bpmTabs.originalTabs.length > 0) {
          const originalTabs = [];
          const datas = [];
          this.bpmInstanceObject.bpmTabs.originalTabs.forEach((tim) => {
            if (tim.id !== 'bpm_idea_tab') {
              originalTabs.push(tim);
            }
          });
          this.data.forEach((tim) => {
            if (tim.id !== 'bpm_idea_tab') {
              datas.push(tim);
            }
          });
          originalTabs.map((tim, index) => {
            if (!isUpdate && (datas[index].id !== tim.id || tim.display !== datas[index].display)) {
              isUpdate = true;
            }
            return void 0;
          });
        }
        if (isUpdate === true) {
          this.updateBpmMessage();
        }
      }
      this.showTable = !this.showTable;
    },
    updateTableShow(e) {
      if (e.target.id) {
        this.data.forEach((tim) => {
          if (tim.id === e.target.id) {
            if (tim.display === '1') {
              tim.display = '0';
            } else {
              tim.display = '1';
            }
          }
        });
      }
    },
    dragEnd() {
      // eslint-disable-next-line vue/no-mutating-props
      this.bpmInstanceObject.bpmTabs.showTabs = this.data;
    }
  }
};
</script>
<style lang="less">
@import './style/base.less';
</style>
